<template>
  <div class="reportEchart">
    <div class="flexBetween reportEchartBox">
      <div class="reportEchartBoxTitle">
        <div id="myChartOne1" :style="{ width: Width,  height:'4.2rem' }"></div>
      </div>
      <div class="reportEchartBoxTitle">
        <div id="myChartOne" :style="{ width: Width, height:'4.2rem'}"></div>
      </div>
      <div class="reportEchartBoxTitle">
        <div id="myChartOne2" :style="{ width: Width, height:'4.2rem' }"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { setTimeout } from 'timers'
import echarts from 'echarts'
export default {
  props: ['obj', 'orgCode', 'roleType'],
  data() {
    return {
      option: {},
      option1: {},
      option2: {},
      Width: '100%',
      maxWidth: '10rem',
      clientWidth: document.documentElement.clientWidth,
      options: {
        calculable: true,
        title: {
          text: '',
          textStyle: {
            fontSize: 12,
            color: '#333',
            fontWeight: '400'
          },
          bottom: -6,
          right: 'center'
        },
        xAxis: {
          scale: true,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff', // 颜色
              width: 1 // 粗细
            }
          },
          axisLabel: {
            show: true, //这行代码控制着坐标轴x轴的文字是否显示
            textStyle: {
              fontSize: 11,
              color: '#999' //这里用参数代替了
            }
          },
          data: ['集团', '我的', ''] // TODO x轴需要展示的数据
        },
        yAxis: {
          show: false,
          splitNumber: '',
          min: 0 // TODO 最小值数据
        },

        series: [
          {
            name: '已处理', // todo xAxis.data值
            type: 'bar',
            stack: '处理', // 控制是堆型，还是列型图
            barCategoryGap: '5%',
            barMinHeight: this.globalVariable.barMinHeight,
            barWidth: 22, //柱图宽度
            label: {
              normal: {
                fontSize: this.globalVariable.itemFontSize,
                color: this.globalVariable.labelColor,
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#5587F0',
                barBorderRadius: [0, 0, 4, 4]
              }
            },
            data: [] // todo xAxis.data[0]值
          },
          {
            name: '未处理',
            type: 'bar',
            stack: '处理', // 控制是堆型，还是列型图
            barCategoryGap: '5%',
            barMinHeight: this.globalVariable.barMinHeight,
            barWidth: 22, //柱图宽度
            label: {
              normal: {
                fontSize: this.globalVariable.itemFontSize,
                color: this.globalVariable.labelColor,
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#64D7B9'
              }
            },
            data: []
          },
          {
            name: '处理',
            type: 'bar',
            stack: '处理', // 控制是堆型，还是列型图
            barCategoryGap: '5%',
            barMinHeight: this.globalVariable.barMinHeight,
            barWidth: 22, //柱图宽度
            label: {
              normal: {
                fontSize: this.globalVariable.itemFontSize,
                color: this.globalVariable.labelColor,
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#FA5F87',
                barBorderRadius: [4, 4, 0, 0]
              }
            },
            data: []
          },
          {
            name: '平均天数',
            type: 'bar',
            stack: '处理',
            barCategoryGap: '5%',
            barWidth: 22, //柱图宽度
            label: {
              normal: {
                show: true,
                position: 'insideBottom',
                fontSize: 12,
                color: '#666',
                fontFamily: 'numFontFamily'
              }
            },
            itemStyle: {
              normal: {
                color: '#fff'
              }
            },
            data: []
          }
        ]
      }
    }
  },
  created() {
    setTimeout(() => {
      this.getlist1()
    }, 1000)
  },
  mounted() {
    window.addEventListener('resize', () => {
       this.drawLine()
    })
    this.drawLine()
  },
  updated(){
    this.getlist1()
    this.drawLine()
  },
  watch: {
    option: {
      handler(newVal, oldVal) {
        if (this.myChart) {
          if (newVal) {
            this.myChart.setOption(newVal)
          } else {
            this.myChart.setOption(oldVal)
          }
        } else {
          this.drawLine()
        }
      },
      deep: true //对象内部属性的监听，关键。
    }, // 首页tab标签页切换；
    orgCode: {
      handler(newVal, oldVal) {
        this.getlist1()
        this.drawLine()
      },
      deep: true
    },
    obj: {
      handler(newVal, oldVal) {
        this.obj = newVal
        this.getlist1()
        this.drawLine()
      },
      deep: true //对象内部属性的监听，关键。
    },
    // clientWidth(newVal, oldVal) {
    //   this.drawLine()
    // }
  },
  computed: {
    XSH_AMOUNT() {
      if (this.orgCode && this.orgCode != 0) {
        return this.obj &&
          this.obj.deptdata &&
          this.obj.deptdata[this.orgCode] &&
          this.obj.deptdata[this.orgCode].XSH_AMOUNT != 0
          ? this.obj.deptdata[this.orgCode].XSH_AMOUNT * 1
          : 0
      }
      if (!this.orgCode) {
        return this.obj &&
          this.obj.individuadata &&
          this.obj.individuadata.XSH_AMOUNT &&
          this.obj.individuadata.XSH_AMOUNT != 0
          ? this.obj.individuadata.XSH_AMOUNT * 1
          : 0
      }
    },
    XYFK_AMOUNT() {
      if (this.orgCode && this.orgCode != 0) {
        return this.obj &&
          this.obj.deptdata &&
          this.obj.deptdata[this.orgCode] &&
          this.obj.deptdata[this.orgCode].XYFK_AMOUNT != 0
          ? this.obj.deptdata[this.orgCode].XYFK_AMOUNT * 1
          : 0
      }
      if (!this.orgCode) {
        return this.obj &&
          this.obj.individuadata &&
          this.obj.individuadata.XYFK_AMOUNT &&
          this.obj.individuadata.XYFK_AMOUNT != 0
          ? this.obj.individuadata.XYFK_AMOUNT * 1
          : 0
      }
    },
    LJK_AMOUNT() {
      if (this.orgCode && this.orgCode != 0) {
        return this.obj &&
          this.obj.deptdata &&
          this.obj.deptdata[this.orgCode] &&
          this.obj.deptdata[this.orgCode].LJK_AMOUNT != 0
          ? this.obj.deptdata[this.orgCode].LJK_AMOUNT * 1
          : 0
      }
      if (!this.orgCode) {
        return this.obj &&
          this.obj.individuadata &&
          this.obj.individuadata.LJK_AMOUNT &&
          this.obj.individuadata.LJK_AMOUNT != 0
          ? this.obj.individuadata.LJK_AMOUNT * 1
          : 0
      }
    }
  },
  methods: {
    getOption() {
      this.options.series[0].itemStyle = {
        normal: {
          barBorderRadius: [0, 0, 4, 4],
          // @ts-ignore
          // { offset: 0, color: '#56CCFF' },
          //   { offset: 1, color: '#5EB1FF' },
          color: '#97BBFA'
          // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //   { offset: 0, color: 'rgba(86,240,255,0.9)' },
          //   { offset: 1, color: 'rgba(94,177,255,0.9)' },
          // ]),
        }
      }
      this.options.series[1].itemStyle = {
        normal: {
          // @ts-ignore
          color: '#90D9B4'
          // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //   { offset: 0, color: 'rgba(55,219,176,0.9)'},
          //   { offset: 1, color: 'rgba(70,288,162,0.9)'},
          // ]),
        }
      }
      this.options.series[2].itemStyle = {
        normal: {
          barBorderRadius: [4, 4, 0, 0],
          color: '#FACD82'
          // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //   { offset: 0, color: "rgba(255,155,96,0.9)"},
          //   { offset: 1, color: "rgba(255,149,89,0.9)"},
          // ]),
        }
      }
      if (this.orgCode == '集团') {
        this.options.xAxis.data = ['本月', '上月']
      } else if (this.roleType == 1 && this.orgCode != 0) {
        this.options.xAxis.data = ['集团', '部门']
      } else if (this.roleType == 2 && this.orgCode != 0) {
        this.options.xAxis.data = ['集团', '地区']
      } else {
        this.options.xAxis.data = ['集团', '我的']
      }
      // if (this.$store.state.isMobile) {
      //   this.options.series[0].barWidth = 22
      // } else {
      //   this.options.series[0].barWidth = 22
      // }
      this.option = JSON.parse(JSON.stringify(this.options))
      this.option.title.text = '非信用付款'
      this.option.title.subtext = this.XSH_AMOUNT + '单'
      this.option1 = JSON.parse(JSON.stringify(this.options))
      this.option1.title.text = '信用付款'
      this.option1.title.subtext = this.XYFK_AMOUNT + '单'
      this.option2 = JSON.parse(JSON.stringify(this.options))
      this.option2.title.text = '领借款'
      this.option2.title.subtext = this.LJK_AMOUNT + '单'
    },
    getlist1() {
      this.getOption()
      if (this.obj) {
        // 集团对象 obj 数据；
        const avgtimedataXSH_YWSH =
          this.obj.avgtimedata && this.obj.avgtimedata.XSH_YWSH
            ? this.obj.avgtimedata.XSH_YWSH
            : ''
        const avgtimedataXSH_DBYD =
          this.obj.avgtimedata && this.obj.avgtimedata.XSH_DBYD
            ? this.obj.avgtimedata.XSH_DBYD
            : ''
        const avgtimedataXSH_GXCL =
          this.obj.avgtimedata && this.obj.avgtimedata.XSH_GXCL
            ? this.obj.avgtimedata.XSH_GXCL
            : ''
        const avgtimedataXYFK_YWSH =
          this.obj.avgtimedata && this.obj.avgtimedata.XYFK_YWSH
            ? this.obj.avgtimedata.XYFK_YWSH
            : ''
        const avgtimedataXYFK_GXCL =
          this.obj.avgtimedata && this.obj.avgtimedata.XYFK_GXCL
            ? this.obj.avgtimedata.XYFK_GXCL
            : ''
        const avgtimedataLJK_YWSH =
          this.obj.avgtimedata && this.obj.avgtimedata.LJK_YWSH
            ? this.obj.avgtimedata.LJK_YWSH
            : ''
        const avgtimedataLJK_GXCL =
          this.obj.avgtimedata && this.obj.avgtimedata.LJK_GXCL
            ? this.obj.avgtimedata.LJK_GXCL
            : ''
        const avgtimedataAVG_SJ_XSH =
          this.obj.avgtimedata &&
          this.obj.avgtimedata.AVG_SJ_XSH &&
          this.obj.avgtimedata.AVG_SJ_XSH != 0
            ? this.obj.avgtimedata.AVG_SJ_XSH
            : 0
        const avgtimedataAVG_SJ_XYFK =
          this.obj.avgtimedata &&
          this.obj.avgtimedata.AVG_SJ_XYFK &&
          this.obj.avgtimedata.AVG_SJ_XYFK != 0
            ? this.obj.avgtimedata.AVG_SJ_XYFK
            : 0
        const avgtimedataAVG_SJ_LJK =
          this.obj.avgtimedata &&
          this.obj.avgtimedata.AVG_SJ_LJK &&
          this.obj.avgtimedata.AVG_SJ_LJK != 0
            ? this.obj.avgtimedata.AVG_SJ_LJK
            : 0
        // 本人对象 obj 数据集合；

        const individuadataXSH_YWSH =
          this.obj.individuadata &&
          this.obj.individuadata.XSH_YWSH &&
          this.XSH_AMOUNT != 0
            ? this.obj.individuadata.XSH_YWSH
            : ''
        const individuadataXSH_DBYD =
          this.obj.individuadata &&
          this.obj.individuadata.XSH_DBYD &&
          this.XSH_AMOUNT != 0
            ? this.obj.individuadata.XSH_DBYD
            : ''
        const individuadataXSH_GXCL =
          this.obj.individuadata &&
          this.obj.individuadata.XSH_GXCL &&
          this.XSH_AMOUNT != 0
            ? this.obj.individuadata.XSH_GXCL
            : ''
        const individuadataXYFK_YWSH =
          this.obj.individuadata &&
          this.obj.individuadata.XYFK_YWSH &&
          this.XYFK_AMOUNT != 0
            ? this.obj.individuadata.XYFK_YWSH
            : ''
        const individuadataXYFK_GXCL =
          this.obj.individuadata &&
          this.obj.individuadata.XYFK_GXCL &&
          this.XYFK_AMOUNT != 0
            ? this.obj.individuadata.XYFK_GXCL
            : ''
        const individuadataLJK_YWSH =
          this.obj.individuadata &&
          this.obj.individuadata.LJK_YWSH &&
          this.LJK_AMOUNT != 0
            ? this.obj.individuadata.LJK_YWSH
            : ''
        const individuadataLJK_GXCL =
          this.obj.individuadata &&
          this.obj.individuadata.LJK_GXCL &&
          this.LJK_AMOUNT != 0
            ? this.obj.individuadata.LJK_GXCL
            : ''
        const individuadataAVG_SJ_XSH =
          this.obj &&
          this.obj.individuadata &&
          this.obj.individuadata.AVG_SJ_XSH &&
          this.obj.individuadata.AVG_SJ_XSH != 0
            ? this.obj.individuadata.AVG_SJ_XSH
            : 0 // 非信用后付款平均时间
        const individuadataAVG_SJ_XYFK =
          this.obj &&
          this.obj.individuadata &&
          this.obj.individuadata.AVG_SJ_XYFK &&
          this.obj.individuadata.AVG_SJ_XYFK != 0
            ? this.obj.individuadata.AVG_SJ_XYFK
            : 0 // 信用付款
        const individuadataAVG_SJ_LJK =
          this.obj &&
          this.obj.individuadata &&
          this.obj.individuadata.AVG_SJ_LJK &&
          this.obj.individuadata.AVG_SJ_LJK != 0
            ? this.obj.individuadata.AVG_SJ_LJK
            : 0 // 领借款
        // const list1 = [avgtimedataXSH_YWSH, individuadataXSH_YWSH, avgtimedataXYFK_YWSH, individuadataXYFK_YWSH, avgtimedataLJK_YWSH, individuadataLJK_YWSH] // 业务审核
        // const list2 = [avgtimedataXSH_DBYD, individuadataXSH_DBYD]
        // const list3 = [avgtimedataXSH_GXCL, individuadataXSH_GXCL, avgtimedataXYFK_GXCL, individuadataXYFK_GXCL, avgtimedataLJK_GXCL, individuadataLJK_GXCL]
        // const list4 = [avgtimedataAVG_SJ_XSH, individuadataAVG_SJ_XSH, avgtimedataAVG_SJ_XYFK, individuadataAVG_SJ_XYFK, avgtimedataAVG_SJ_LJK, individuadataAVG_SJ_LJK]
        // 代表除本人外的部门/地区 和集团的数据;
        var max1 = Number(avgtimedataAVG_SJ_XSH) // 集团平均数最大值
        var max3 = Number(avgtimedataAVG_SJ_XYFK) // 集团平均数最大值
        var max5 = Number(avgtimedataAVG_SJ_LJK) // 集团平均数最大值

        if (this.orgCode != 0) {
          var deptdataXSH_YWSH =
            this.obj.deptdata &&
            this.XSH_AMOUNT != 0 &&
            this.obj.deptdata[this.orgCode]
              ? this.obj.deptdata[this.orgCode].XSH_YWSH
              : '' //先审核后付款-业务审核时间
          var deptdataXSH_DBYD =
            this.obj.deptdata &&
            this.XSH_AMOUNT != 0 &&
            this.obj.deptdata[this.orgCode]
              ? this.obj.deptdata[this.orgCode].XSH_DBYD
              : '' //先审核后付款-打包邮递时间
          var deptdataXSH_GXCL =
            this.obj.deptdata &&
            this.XSH_AMOUNT != 0 &&
            this.obj.deptdata[this.orgCode]
              ? this.obj.deptdata[this.orgCode].XSH_GXCL
              : '' //先审核后付款-共享处理时间
          var deptdataXYFK_YWSH =
            this.obj.deptdata &&
            this.XYFK_AMOUNT != 0 &&
            this.obj.deptdata[this.orgCode]
              ? this.obj.deptdata[this.orgCode].XYFK_YWSH
              : '' //信用付款-业务审核时间
          var deptdataXYFK_GXCL =
            this.obj.deptdata &&
            this.XYFK_AMOUNT != 0 &&
            this.obj.deptdata[this.orgCode]
              ? this.obj.deptdata[this.orgCode].XYFK_GXCL
              : '' //信用付款-共享处理时间
          var deptdataLJK_YWSH =
            this.obj.deptdata &&
            this.LJK_AMOUNT != 0 &&
            this.obj.deptdata[this.orgCode]
              ? this.obj.deptdata[this.orgCode].LJK_YWSH
              : '' //领借款-业务审核时间
          var deptdataLJK_GXCL =
            this.obj.deptdata &&
            this.LJK_AMOUNT != 0 &&
            this.obj.deptdata[this.orgCode] &&
            this.obj.deptdata[this.orgCode].LJK_GXCL != 0
              ? this.obj.deptdata[this.orgCode].LJK_GXCL
              : '' //领借款-共享处理时间
          var deptdataAVG_SJ_XSH =
            this.obj.deptdata &&
            this.obj.deptdata[this.orgCode] &&
            this.obj.deptdata[this.orgCode].AVG_SJ_XSH != 0
              ? this.obj.deptdata[this.orgCode].AVG_SJ_XSH
              : 0 // 非信用后付款平均时间
          var deptdataAVG_SJ_XYFK =
            this.obj.deptdata &&
            this.obj.deptdata[this.orgCode] &&
            this.obj.deptdata[this.orgCode].AVG_SJ_XYFK != 0
              ? this.obj.deptdata[this.orgCode].AVG_SJ_XYFK
              : 0 // 信用付款
          var deptdataAVG_SJ_LJK =
            this.obj.deptdata &&
            this.obj.deptdata[this.orgCode] &&
            this.obj.deptdata[this.orgCode].AVG_SJ_LJK != 0
              ? this.obj.deptdata[this.orgCode].AVG_SJ_LJK
              : 0 // 领借款
          // 部门和地区
          // 非信用付款
          var list1 = [avgtimedataXSH_YWSH, deptdataXSH_YWSH]
          var list2 = [avgtimedataXSH_DBYD, deptdataXSH_DBYD]
          var list3 = [avgtimedataXSH_GXCL, deptdataXSH_GXCL]
          var list4 = [avgtimedataAVG_SJ_XSH, deptdataAVG_SJ_XSH]
          var max2 = Number(deptdataAVG_SJ_XSH)
          var list5 = [avgtimedataXYFK_YWSH, deptdataXYFK_YWSH]
          var list6 = []
          var list7 = [avgtimedataXYFK_GXCL, deptdataXYFK_GXCL]
          var list8 = [avgtimedataAVG_SJ_XYFK, deptdataAVG_SJ_XYFK]
          var max4 = Number(deptdataAVG_SJ_XYFK)
          // 领借款
          var list9 = [avgtimedataLJK_YWSH, deptdataLJK_YWSH]
          var list10 = []
          var list11 = [avgtimedataLJK_GXCL, deptdataLJK_GXCL]
          var list12 = [avgtimedataAVG_SJ_LJK, deptdataAVG_SJ_LJK]
          var max6 = Number(deptdataAVG_SJ_LJK)
        }
        if (this.orgCode == 0) {
          // 代表本人和集团的数据；
          //  非信用付款
          var list1 = [avgtimedataXSH_YWSH, individuadataXSH_YWSH]
          var list2 = [avgtimedataXSH_DBYD, individuadataXSH_DBYD]
          var list3 = [avgtimedataXSH_GXCL, individuadataXSH_GXCL]
          var list4 = [avgtimedataAVG_SJ_XSH, individuadataAVG_SJ_XSH]
          var max2 = Number(individuadataAVG_SJ_XSH)
          // 信用付款
          var list5 = [avgtimedataXYFK_YWSH, individuadataXYFK_YWSH]
          var list6 = []
          var list7 = [avgtimedataXYFK_GXCL, individuadataXYFK_GXCL]
          var list8 = [avgtimedataAVG_SJ_XYFK, individuadataAVG_SJ_XYFK]
          var max4 = Number(individuadataAVG_SJ_XYFK)
          // 领借款
          var list9 = [avgtimedataLJK_YWSH, individuadataLJK_YWSH]
          var list10 = []
          var list11 = [avgtimedataLJK_GXCL, individuadataLJK_GXCL]
          var list12 = [avgtimedataAVG_SJ_LJK, individuadataAVG_SJ_LJK]
          var max6 = Number(individuadataAVG_SJ_LJK)
        }

        var arr = [max1, max2, max3, max4, max5, max6]
        var max = arr.reduce(function(a, b) {
          return b > a ? b : a
        })
        if (max > 188) {
          this.option.yAxis.max = max
          this.option1.yAxis.max = max
          this.option2.yAxis.max = max
        } else if (max > 5 && max < 20) {
          this.option.yAxis.max = max - max / 8.5
          this.option1.yAxis.max = max - max / 8.5
          this.option2.yAxis.max = max - max / 8.5
        } else {
          // 小于5
          this.option.yAxis.max = max - max / 6.5
          this.option1.yAxis.max = max - max / 6.5
          this.option2.yAxis.max = max - max / 6.5
        }

        this.obj ? this.option.series[0].data.push(...list1) : ''
        this.obj ? this.option.series[1].data.push(...list2) : ''
        this.obj ? this.option.series[2].data.push(...list3) : ''
        this.obj ? this.option.series[3].data.push(...list4) : ''

        this.obj ? this.option1.series[0].data.push(...list5) : ''
        this.obj ? this.option1.series[1].data.push(...list6) : ''
        this.obj ? this.option1.series[2].data.push(...list7) : ''
        this.obj ? this.option1.series[3].data.push(...list8) : ''

        this.obj ? this.option2.series[0].data.push(...list9) : ''
        this.obj ? this.option2.series[1].data.push(...list10) : ''
        this.obj ? this.option2.series[2].data.push(...list11) : ''
        this.obj ? this.option2.series[3].data.push(...list12) : ''
      }
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChartOne'))
      let myChart1 = this.$echarts.init(document.getElementById('myChartOne1'))
      let myChart2 = this.$echarts.init(document.getElementById('myChartOne2'))
      let reportEchart = document.getElementsByClassName('reportEchart')[0]
      myChart.setOption(this.option)
      myChart1.setOption(this.option1)
      myChart2.setOption(this.option2)
      reportEchart.style.height = 4.4 + 'rem'
      window.addEventListener('resize', () => {
        myChart.resize()
        myChart1.resize()
        myChart2.resize()
        // canvas 如果id高度变化窗口变动自定义高度。
        document.getElementById(
          'myChartOne'
        ).childNodes[0].childNodes[0].style.height = '4.2rem'
        document.getElementById(
          'myChartOne1'
        ).childNodes[0].childNodes[0].style.height = '4.2rem'
        document.getElementById(
          'myChartOne2'
        ).childNodes[0].childNodes[0].style.height = '4.2rem'
      })
    },
  }
}
</script>

<style>
.reportEchart {
  width: 96%;
  margin: 0 auto;
  height: 4.4rem;
}

.reportEchartBox > div {
  display: flex;
  flex-flow: column;
  justify-items: center;
  align-items: center;
  width: 33%;
}

#myChartOne div {
  max-width: 10rem !important;
}
</style>